<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../static/layui/css/layui.css"/>

    <style type="text/css">

    </style>
</head>
<body style="padding: 10px;box-sizing: border-box;">

<div style="display:flex;justify-content: space-between;">
    <span class="layui-breadcrumb">
    {{{foreach from=$crumbs item=item}}}
        {{{if $item@last}}}
            <a><cite>{{{$item.name}}}</cite></a>


{{{else}}}


            <a href="./{{{$item.url}}}?name={{{$item.name}}}&url={{{$item.url}}}">{{{$item.name}}}</a>
        {{{/if}}}
    {{{/foreach}}}
</span>
</div>
<table id="demo" lay-filter="test"></table>

<script src="../../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        $ = layui.jquery;
        // 假设这是当前的URL
        const currentUrl = window.location.href; // 或者使用任何你想要的URL字符串

        // 创建一个URL对象
        const url = new URL(currentUrl);

        // 获取URL的搜索部分（即?后面的部分）并创建一个URLSearchParams对象
        const params = new URLSearchParams(url.search);
        console.log(params.get('parent_id'))
        //第一个实例
        table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , height: 'full-60'
            , url: 'base' //数据接口
            , method: 'post'
            , where: {parent_id: params.get('parent_id')}
            , page: true //开启分页
            , lineStyle: 'height: 50px;'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'Id', width: 90, sort: true}
                , {field: 'parent_id', title: '所属父菜单', width: 120}
                , {field: 'name', title: '菜单名', width: 90}
                , {field: 'url', title: '菜单地址', width: 90}
                , {field: 'order_num', title: '排序', width: 80, sort: true}
                , {field: 'status', title: '是否开启', width: 90}
                , {field: 'created_at', title: '创建时间', width: 165, sort: true}
                , {field: 'updated_at', title: '修改时间', width: 165, sort: true}
                , { title: '操作', align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
                window.location.href = `base?parent_id=${data.id}&name=${data.name}&url=${data.url}`
            } else if (layEvent === 'del') { //删除
                layer.confirm('确认删除，该条记录吗？', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.post('./base/delete', {id: data.id}, function (res) {
                        console.log(res)
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 1})
                            setTimeout(function () {
                                layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
                            }, 1000)
                        } else {
                            layer.msg(res.msg || '请求失败', {icon: 2});
                        }
                    }, 'json')
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 2,
                    title: '修改',
                    area: ['550px', '600px'],
                    content: './base/update?id=' + data.id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });

        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '添加',
                        area: ['550px', '600px'],
                        content: './base/add' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
                    break;
                case 'delete':
                    var data = checkStatus.data;

                    if (data.length === 0) {
                        layer.msg('请选择要删除的行');
                        return;
                    }

                    // 构造要删除的ID数组
                    var ids = data.map(function (item) {
                        return item.id;
                    });

                    // 发送删除请求
                    $.ajax({
                        url: './base/delete', // 删除接口
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({ids: ids}),
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg);
                                // 刷新表格
                                table.reload('demo');
                            } else {
                                layer.msg(res.msg);
                            }
                        },
                        error: function () {
                            layer.msg('请求失败');
                        }
                    });
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            }
        });
    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm " lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">下一级</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>
